<template>
  <el-dialog
    title="列配置"
    :visible.sync="dialogVisible"
    @close="dialogVisibleClose"
    lock-scroll
    width="600px"
    :modal="isMask"
  >
    <div class="dialog_div_new">
      <div class="dialog_middle">
        <div class="middle_table">
          <div>
            <p>默认列名称</p>
            <p style="bor">自定义列名称</p>
            <p>显示</p>
          </div>
          <div
            class="table_row"
            :class="nowIndex == index ? 'bg_style' : ''"
            v-for="(item, index) in columnData"
            :key="index"
            @click="onClickRow(index)"
            :style="{'border-bottom': (Object.keys(item).indexOf('isShow') == -1 || (Object.keys(item).indexOf('isShow') > -1 && item.isShow)) ? '#ddd 1px solid' : ''}"
          >
            <template
              v-if="(Object.keys(item).indexOf('isShow') == -1 || (Object.keys(item).indexOf('isShow') > -1 && item.isShow)) "
            >
              <p style="color: #666666;">{{ item.morenName }}</p>
              <p style="border-left:#ddd 1px solid;border-right:#ddd 1px solid;">
                <input type="text" v-model="item.zidingyiName" style="height: 100%;border: none" maxlength="10" v-if="(item.props.includes('extendField') || item.props.includes('extendValue')) && !item.noCustom " />
                <input type="text" v-model="item.zidingyiName" style="height: 100%;border: none" disabled v-else-if="item.noCustom" />
                <input type="text" v-model="item.zidingyiName" style="height: 100%;border: none" v-else />
              </p>
              <p>
                <el-checkbox
                  v-model="item.zidingyiState"
                  :disabled="item.noModify || item.isRequired"
                  @change="onChangeState"
                ></el-checkbox>
              </p>
            </template>
          </div>
        </div>
      </div>
      <div class="column_bottom">
        <div v-if="!tempStatus">
          <el-button
            :disabled="isMoveUp"
            type="primary"
            plain
            icon="el-icon-upload2"
            @click="onMoveUp"
          >上移</el-button>
          <el-button
            :disabled="isMoveDown"
            type="primary"
            plain
            icon="el-icon-download"
            @click="onMoveDown"
          >下移</el-button>
        </div>
        <div v-else></div>
        <div>
          <el-button style="width: 100px" @click="onRestoreDefault">还原默认值</el-button>
          <el-button class="primary_btn" type="primary" @click="onSubmit">保存</el-button>
          <el-button @click.stop="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  props: {
    columnDataArr: Array,
    defaultColumnDataArr: Array,
    orderType: String,
    isMask: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      nowIndex: -1, // 记录当前点击的行下标
      getDivs: [], // 存储页面上的所有行
      isMoveUp: false, // 是否禁用上移按钮
      isMoveDown: false, // 是否禁用下移按钮
      dialogVisible: false,
      columnData: [],
      defaultData: [],
      tempStatus: false
    }
  },
  created () {
    // this.handleData()
  },
  watch: {
    dialogVisible () {
      if (!this.tempStatus) {
        this.handleData()
      }
    },
  },
  methods: {
    loadData (list, defaultList) {
      this.tempStatus = true
      this.defaultData = JSON.parse(JSON.stringify(defaultList))
      this.columnData = JSON.parse(JSON.stringify(list))
      this.dialogVisible = true
    },
    // 初始化把父组件传递的object转换为array
    handleData () {
      this.columnData = []
      let str = JSON.stringify(this.columnDataArr)
      let obj = JSON.parse(str)
      this.columnData = obj
    },
    // 点击当前行数据
    onClickRow (index) {
      // 判断如果当前点击的行是第一行 禁用上移按钮
      // this.isMoveUp = index == 0
      // 判断如果当前点击的行是最后一行 禁用下移按钮
      // this.isMoveDown = index == this.columnData.length - 1
      // 记录当前点击的行下标
      this.nowIndex = index
      if (index == 0) {
        this.isMoveUp = true
        this.isMoveDown = true
      } else if (index == 1) {
        this.isMoveUp = true
        this.isMoveDown = false
      } else if (index == this.columnData.length - 1) {
        this.isMoveUp = false
        this.isMoveDown = true
      } else {
        this.isMoveUp = false
        this.isMoveDown = false
      }
    },
    // 点击是否显示列
    onChangeState (value) {
      this.columnData[this.nowIndex].zidingyiState = value
      // this.columnData[this.nowIndex].isShow = value
    },
    // 上移
    onMoveUp () {
      if (this.nowIndex > 1) {
        let upDate = this.columnData[this.nowIndex - 1]
        this.columnData.splice(this.nowIndex - 1, 1)
        this.columnData.splice(this.nowIndex, 0, upDate)
        this.onClickRow(this.nowIndex - 1)
      }
    },
    // 下移
    onMoveDown () {
      if (this.nowIndex + 1 === this.columnData.length) {
        return
      } else {
        let upDate = this.columnData[this.nowIndex + 1]
        this.columnData.splice(this.nowIndex + 1, 1)
        this.columnData.splice(this.nowIndex, 0, upDate)
        this.onClickRow(this.nowIndex + 1)
      }
    },
    // 还原默认值
    onRestoreDefault () {
      if (this.tempStatus) {
        this.columnData = JSON.parse(JSON.stringify(this.defaultData))
      } else {
        this.columnData = JSON.parse(JSON.stringify(this.defaultColumnDataArr))
      }
    },
    // 保存并向父组件发射修改后数据
    onSubmit () {
      this.$emit('onSaveColumn', this.columnData)
      this.dialogVisible = false
    },
    // 取消
    dialogVisibleClose () { },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__header {
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 16px;
      color: #666;
      font-weight: 600;
    }
    .el-dialog__headerbtn {
      position: static;
      .el-icon-close {
        color: #999;
        font-size: 22px;
      }
    }
  }
}
.dialog_div_new {
  width: 100%;
  height: 70vh;
  overflow: auto;
  background: #fff;
  .dialog_middle {
    height: calc(100% - 65px);
    margin-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    padding: 15px 12px 0;
    overflow: auto;
    .middle_table {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
      font-size: 12px;
      font-family: PingFang SC;
      border: 1px solid #eeeeee;
      div {
        display: flex;
        align-items: center;
        color: #999;
        p {
          margin: 0;
          height: 30px;
          line-height: 0.562535rem;
          display: flex;
          align-items: center;
          &:first-child {
            width: 40%;
            text-align: left;
            box-sizing: border-box;
            padding-left: 0.375023rem;
          }
          &:nth-child(2) {
            width: 35%;
            text-align: center;

            input {
              width: 100%;
              box-sizing: border-box;
              padding: 3px 0;
              height: 24px;
              border: 1px solid #e3e3e3;
              &:focus {
                outline: none;
                border-color: #1890ff;
              }
            }
          }
          &:last-child {
            text-align: center;
            box-sizing: border-box;
            padding-right: 0.562535rem;
            width: 15%;
            margin-left: 10%;
          }
        }
        &:first-child {
          height: 0.562535rem;
          color: #666;
          background: #eeeeee;
          font-weight: 600;
          line-height: 0.562535rem;
          order: -999;
          p:nth-child(2) {
            justify-content: center;
          }
        }
      }
      .bg_style {
        background: #e3f6ff;
      }
      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        background: #c9c9c9;
      }
      &::-webkit-scrollbar-track {
        background: #e5e5e5;
      }
    }
  }
  .column_bottom {
    width: 100%;
    // height: 1.12507rem;
    height: 65px;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
      ::v-deep .el-button {
        // width: 1.12507rem;
        height: 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 6px;
        color: #666;
      }
      ::v-deep .is-plain {
        color: #1890fc;
        background: #e6f7ff;
        border-color: #91d5fe;
      }
      ::v-deep .is-disabled {
        opacity: 0.5;
      }
      .primary_btn {
        background: #1890ff;
        border-color: #1890ff;
        color: #fff;
      }
    }
  }
}
</style>